<template>
  <div class="mapContainer" v-if="active == 'home'">
    <!-- @click="handleClick('map')" -->
    <div class="left" :style="style" v-if="isShowMap">
      <div class="map1" @click="handleClick('map')">
        <Map />
      </div>
      <div class="btn1" v-show="isShowBtn">
        <img class="img" src="@/assets/imgs/放大.png" alt="放大" @click="handleClick('magnify')" />
        <img class="img" src="@/assets/imgs/缩小.png" alt="缩小" @click="handleClick('reduce')" />
      </div>
    </div>
    <div class="right">
      <img :style="isMobileStyle.img" class="img" :src="`${isIntro ? 简介no : 简介}`" alt="视角" @click="handleClick('介绍')" />
      <img v-if="isMobile" :style="isMobileStyle.img" class="img" :src="`${isShowFooter ? 视角 : 隐藏}`" alt="视角"
        @click="handleClick('视角')" />
      <img :style="isMobileStyle.img" class="img" :src="`${isShowMap ? 地图 : 地图no}`" alt="地图"
        @click="handleClick('地图')" />
      <img :style="isMobileStyle.img" class="img music" ref="musicRef" :src="`${isMusic ? music : musicno}`" alt="music"
        @click="handleClick('music')" />
      <!-- <img class="img" :src="`${isIntro ? 简介 : 简介no}`" alt="简介" @click="handleClick('简介')"> -->
    </div>
  </div>
  <MapDialog ref="mapDialogRef" />
  <!-- <BridgeDialog ref="bridgeDialog" /> -->
  <audio v-show="false" src="/prefix/music.mp3" ref="videoRef" autoplay loop></audio>
  <div class="leftContainer">
    <div v-if="isClicked" class="item" @click="changeAngle('视角1')">
      <BasicIcon icon="fanhui1" size="35px" />
      <span>视角返回</span>
    </div>
    <!-- <div v-if="active == 'home'" class="info">
      <span>本系统可以查看{{title}}的实时道路状况，天气状况，道路监控，自然灾害信息。同时还可以获取周围的一些餐饮酒店，旅游景点等各类信息</span>
    </div> -->
  </div>

  <template v-if="isMobile">
    <div class="footerContainer" v-if="isShowFooter && active == 'home'">
      <div class="footer">
        <div class="item" v-for="i in angles" :key="i.url" @click="changeAngle(i.name)">
          <img :class="[
            'img',
            {
              active: angleType == i.name,
            },
          ]" :src="i.url" :alt="i.name" />
          <div class="text">{{ i.name }}</div>
        </div>
      </div>
    </div>
  </template>
  <InfoDialog ref="infoDialogRef" @close="isIntro = true" />
</template>
<script setup>
import Map from '@/views/map/index.vue'
import MapDialog from '../mapDialog/index.vue'
// import BridgeDialog from '../bridgeDialog/index.vue'
import 视角 from '@/assets/imgs/视角.png'
import 隐藏 from '@/assets/imgs/隐藏.png'
import 地图 from '@/assets/imgs/地图.png'
import 地图no from '@/assets/imgs/地图-no.png'
import 简介 from '@/assets/imgs/简介.png'
import 简介no from '@/assets/imgs/简介-no.png'
import music from '@/assets/imgs/music.png'
import musicno from '@/assets/imgs/music-no.png'
import InfoDialog from './infoDialog/index.vue'
import modelDatas from '@/assets/json/model.json'

const isMobile = inject('isMobile')
const router = useRouter()
const videoRef = ref(null)
const mapDialogRef = ref(null)
const infoDialogRef = ref(null)
// const bridgeDialog = ref(null);
const musicRef = ref(null)
const isShowBtn = ref(true)
const isShowMap = ref(true)
const isShowFooter = ref(true)
const isIntro = ref(true)
const isMusic = ref(true)
const style = ref({
  '--w-h': isMobile.value ? '120px' : '250px',
})
const angleType = ref('视角1')
const active = ref('home')
const isClicked = ref(false)
const route = useRoute()
const modelData = modelDatas.model.find((i) => i.name == route.query?.name)

const isMobileStyle = computed(() => {
  style.value = {
    '--w-h': isMobile.value ? '120px' : '250px',
  }
  return {
    img: {
      width: isMobile.value ? '20px' : '40px',
      height: isMobile.value ? '20px' : '40px',
    },
  }
})
console.log('asdsad,', modelData.angles)

const angles = modelData.angles

// switch (route.query.name) {
//   case "金沙江":
//     angle.value = [
//       {
//         name: "视角1",
//         src: "/视角/视角1.png",
//       },
//       {
//         name: "视角2",
//         src: "/视角/视角2.png",
//       },
//       {
//         name: "视角3",
//         src: "/视角/视角3.png",
//       },
//     ];
//     break;
//   case "然乌镇":
//     angle.value = [
//       {
//         name: "视角1",
//         src: "/视角/视角4.png",
//       },
//       {
//         name: "视角2",
//         src: "/视角/视角5.png",
//       },
//       {
//         name: "视角3",
//         src: "/视角/视角6.png",
//       },
//     ];
//     break;
//   case "二郎山":
//     angle.value = [
//       {
//         name: "视角1",
//         src: "/视角/视角7.png",
//       },
//       {
//         name: "视角2",
//         src: "/视角/视角8.png",
//       },
//       {
//         name: "视角3",
//         src: "/视角/视角9.png",
//       },
//     ];
//     break;
// }

const watchCustomEvent = (e) => {
  window.addEventListener('footerClick', (e) => {
    console.log('footerClick', e.detail, active.value)
    active.value = e.detail.active || active.value
    switch (e.detail.type) {
      case 'home':
        isClicked.value = false
        if (active.value === 'home') {
          angleType.value = '视角1'
        }
        break
      case 'other': // 用于判断是否点击了模型
        isClicked.value = true
        break
      case 'back': // 用于判断是否点击了模型
        isClicked.value = false
        break
    }
  })
}

const handleClick = (type) => {
  switch (type) {
    case 'map':
      style.value = {
        '--w-h': isMobile.value ? '120px' : '250px',
      }
      isShowBtn.value = true
      break
    case 'magnify':
      mapDialogRef.value.open()
      break
    case 'reduce':
      style.value = {
        '--w-h': isMobile.value ? '80px' : '120px',
      }
      isShowBtn.value = false
      break
    case '视角':
      isShowFooter.value = !isShowFooter.value
      break
    case 'music':
      if (videoRef.value.paused) {
        isMusic.value = true
        videoRef.value.play()
      } else {
        videoRef.value.pause()
        isMusic.value = false
      }
      musicRef.value.style.animationPlayState = isMusic.value ? 'running' : 'paused'
      break
    case '地图':
      isShowMap.value = !isShowMap.value
      break
    case '介绍':
      isIntro.value = false
      infoDialogRef.value.open()
      break
  }
}
const changeAngle = (type) => {
  angleType.value = type
  console.log(angleType.value)
  switch (type) {
    case '视角1':
      isClicked.value = false
      window.dispatchEvent(
        new CustomEvent('changeAngle', {
          detail: { angle: angles[0].position },
        })
      )
      /*   if (route.query.name == "金沙江") {
        window.dispatchEvent(
          new CustomEvent("changeAngle", {
            detail: { angle: { x: -100, y: 0, z: 100 } },
          })
        );
      }
      if (route.query.name == "然乌镇") {
        window.dispatchEvent(
          new CustomEvent("changeAngle", {
            detail: { angle: { x: 300, y: 300, z: 300 } },
          })
        );
      }
      if (route.query.name == "二郎山") {
        window.dispatchEvent(
          new CustomEvent("changeAngle", {
            detail: { angle: { x: -100, y: 0, z: 100 } },
          })
        );
      } */
      break
    case '视角2':
      window.dispatchEvent(
        new CustomEvent('changeAngle', {
          detail: { angle: angles[1].position },
        })
      )
      /* if (route.query.name == "金沙江") {
        window.dispatchEvent(
          new CustomEvent("changeAngle", {
            detail: { angle: { x: 0, y: -100, z: 300 } },
          })
        );
      }
      if (route.query.name == "然乌镇") {
        window.dispatchEvent(
          new CustomEvent("changeAngle", {
            detail: { angle: { x: 0, y: 600, z: 300 } },
          })
        );
      }
      if (route.query.name == "二郎山") {
        window.dispatchEvent(
          new CustomEvent("changeAngle", {
            detail: { angle: { x: 50, y: -100, z: 300 } },
          })
        );
      } */
      break
    case '视角3':
      window.dispatchEvent(
        new CustomEvent('changeAngle', {
          detail: { angle: angles[2].position },
        })
      )
      /* if (route.query.name == "金沙江") {
        window.dispatchEvent(
          new CustomEvent("changeAngle", {
            detail: { angle: { x: 100, y: 100, z: -300 } },
          })
        );
      }
      if (route.query.name == "然乌镇") {
        window.dispatchEvent(
          new CustomEvent("changeAngle", {
            detail: { angle: { x: -500, y: 600, z: 0 } },
          })
        );
      }
      if (route.query.name == "二郎山") {
        window.dispatchEvent(
          new CustomEvent("changeAngle", {
            detail: { angle: { x: 300, y: 100, z: 100 } },
          })
        );
      } */
      break
  }
}

const mapHandle = () => {
  if (navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1) {
    uni.navigateTo({
      url: '/pages/map/index',
    })
  } else {
    router.push('/map')
  }
}
onMounted(() => {
  watchCustomEvent()
})
</script>
<style lang="scss" scoped>
.mapContainer {
  position: fixed;
  top: 80px;
  right: 10px;
  display: flex;
  z-index: 999;

  .left {
    width: var(--w-h);
    padding: 5px;
    border-radius: 10px;
    border: 1px solid var(--el-border-color);
    background-color: var(--el-bg-color);
    height: 100%;

    .map1 {
      margin: 0 auto;
      // width: var(--w-h);
      height: var(--w-h);
    }

    .btn1 {
      margin-top: 5px;
      display: flex;
      justify-content: space-around;

      .img {
        width: 20px;
        height: 20px;
        cursor: pointer;
      }
    }
  }

  .right {
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    // justify-content: space-between;
    align-items: center;
    gap: 20px;

    .img {
      width: 20px;
      height: 20px;
      cursor: pointer;
    }

    .music {
      animation: rotate 2s linear infinite;
      animation-play-state: running;
    }

    @keyframes rotate {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }
  }
}

.leftContainer {
  position: fixed;
  top: 60px;
  left: 10px;

  .item {
    cursor: pointer;
    font-size: 14px;
    display: flex;
    color: #fff;
    align-items: center;
    gap: 2px;
  }

  .info {
    margin-top: 20px;
    width: 100px;
    font-size: 12px;
    color: #fff;
  }
}

.footerContainer {
  z-index: 99;
  position: fixed;
  bottom: 100px;
  right: 0px;
  left: 0px;
  padding: 10px 20px;
  background: #00000047;

  .footer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    width: 100%;

    .item {
      width: 70px;
      height: 70px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .img {
        width: 55px;
        height: 55px;
        border-radius: 5px;
        border: 1px solid #ccc;
      }

      .active {
        border-color: orange;
      }

      .text {
        margin-top: 5px;
        font-size: 10px;
        color: #fff;
        text-align: center;
      }
    }
  }
}
</style>

<style>
/* 隐藏Logo */
.amap-logo {
  display: none !important;
  opacity: 0 !important;
}

/* 隐藏版权信息 */
.amap-copyright {
  opacity: 0;
}
</style>
